<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱形图</title>
</head>
<body>
<div id="container"></div>
<script src="./dist/sparrow.min.js"></script>
<script>
    const data = [
        {genre: 'Sports', sold: 275},
        {genre: 'Strategy', sold: 115},
        {genre: 'Action', sold: 120},
        {genre: 'Shooter', sold: 350},
        {genre: 'Other', sold: 150},
    ];

    const chart = sp
        .interval()
        .data(data)
        .encode(
            sp.x().field('genre'),
            sp.y().field('sold'),
            sp.fill().field('genre'),
        )
        .scale({channel: 'x', type: 'band', range: [0, 0.2, 0.4, 0.6, 0.8, 1], padding: 0.2})
        .scale({channel: 'y', range: [1, 0]})
        .scale({channel: 'y1', domain: [0, 1], range: [1, 0]})
        .scale({
            channel: 'fill', range: [
                '#5B8FF9',
                '#5AD8A6',
                '#5D7092',
                '#F6BD16',
                '#6F5EF9',
                '#6DC8EC',
                '#945FB9',
                '#FF9845',
                '#1E9493',
                '#FF99C3',
            ]
        })
        .width(500)
        .height(400)
        .plot();

    document.getElementById("container").appendChild(chart);
</script>
</body>
</html>
